<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户登录</title>
    <!-- Custom Theme files -->
    <link href="logincss/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <!--Google Fonts-->
    <link href='http://fonts.useso.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic'
          rel='stylesheet' type='text/css'>
    <!--Google Fonts-->
</head>
<body>
<!--header start here-->
<div class="login">
    <div class="login-main">
        <div class="login-top">
            <img src="images/head-img.png" alt=""/>
            <h1>用户登录</h1>
            <form action="/login" method="post" onsubmit="return checkMatch();">
                <input type="text" id="emailId" name="email" placeholder="Email" required="">
                <input type="password" id="passId" name="pass" placeholder="密码" required="">
                <div class="login-bottom">
                    <div class="login-check">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked="checked"/><i> </i> 记 住 我</label>
                    </div>
                    <div class="clear"></div>
                </div>
                <input type="submit" value="登录"/>
            </form>
        </div>
    </div>
</div>
<!--header end here-->


<script>
    //message消息提示工具函数（冒泡提醒）
    //type:success, error, info
    //time:ms
    function displayAlert(type, data, time) {
        var message_div = document.createElement("div");
        if (type === "success") {
            message_div.style.backgroundColor = "#f0f9eb";
            message_div.style.color = "#67c23a";
        } else if (type === "error") {
            message_div.style.backgroundColor = "#fef0f0";
            message_div.style.color = "#f56c6c";
        } else if (type === "info") {
            message_div.style.backgroundColor = "#e6b800";
            message_div.style.color = "rgb(249 103 103)";
        } else {
            console.log("入参type错误");
            return;
        }
        message_div.id = "message_div";
        message_div.style.position = "absolute";
        message_div.style.width = "200px";
        message_div.style.height = "41px";
        message_div.style.lineHeight = "40px";
        message_div.style.marginLeft = "-100px";
        message_div.style.marginTop = "-30px";
        message_div.style.left = "50%";
        message_div.style.top = "12%";
        message_div.style.fontSize = "22px";
        message_div.style.borderRadius = "9px";
        message_div.style.textAlign = "center";
        if (document.getElementById("message_div") == null) {
            document.body.appendChild(message_div);
            message_div.innerHTML = data;
            setTimeout(function () {
                document.body.removeChild(message_div);
            }, time);
        }
    }

    //查询Cookie，调用message消息提示
    function CheckCookie() {
        //读取cookies
        function getCookie(name) {
            console.log("检查cookie")
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            return (arr === document.cookie.match(reg))?arr[2]:null;
        }
        if (getCookie("LoginFailed") != null) {
            displayAlert("error", "登录失败，请重试", 3000);
        } else {
            displayAlert("success", "欢迎前来登录", 3000);
        }
    }
    CheckCookie();



//正则检查邮箱格式
    function checkMatch() {
        var emailId = document.getElementById("emailId");
        var email = emailId.value;
        var emailpattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
        var emailb = emailpattern.test(email);
        if (!emailb) {
            alert("您输入的邮箱不符合规则")
            return false
        } else {
            displayAlert("info","登录中。。。",80000);
            return true;
        }

    }
</script>
</body>
</html>